<template>
  <div class="detail">
    <tab-control
      v-if="showTabControl"
      class="tabs"
      @tabItemClick="tabClick"
      :titles="names"
      ref="tabControlRef"
    />
    <van-nav-bar
      title="房屋详情"
      left-text="旅途"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main" v-if="mainPart" v-memo="[mainPart]">
      <detail01Swipe :swipe-data="mainPart.topModule.housePicture.housePics" />
      <detail02Infos
        name="描述"
        :ref="getSelectionRef"
        :top-infos="mainPart.topModule"
      />
      <detail03Facility
        name="设施"
        :ref="getSelectionRef"
        :house-facility="mainPart.dynamicModule.facilityModule.houseFacility"
      />
      <detail04Landlord
        name="房东"
        :ref="getSelectionRef"
        :landlord="mainPart.dynamicModule.landlordModule"
      />
      <detail05Comment
        name="评论"
        :ref="getSelectionRef"
        :comment="mainPart.dynamicModule.commentModule"
      />
      <detail06Notice
        name="须知"
        :ref="getSelectionRef"
        :order-rules="mainPart.dynamicModule.rulesModule.orderRules"
      />
      <detail07Map
        name="周边"
        :ref="getSelectionRef"
        :position="mainPart.dynamicModule.positionModule"
      />
      <detail08Intro :price-intro="mainPart.introductionModule" />
    </div>
    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="" />
      <div class="text">弘源旅途, 永无止境!</div>
    </div>
  </div>
</template>

<script setup>
import tabControl from "@/components/tab-control/tab-control.vue";
import detail01Swipe from "./cpns/detail_01-swipe.vue";
import detail02Infos from "./cpns/detail_02-infos.vue";
import detail03Facility from "./cpns/detail_03-facility.vue";
import detail04Landlord from "./cpns/detail_04-landlord.vue";
import detail05Comment from "./cpns/detail_05-comment.vue";
import detail06Notice from "./cpns/detail_06-notice.vue";
import detail07Map from "./cpns/detail_07-map.vue";
import detail08Intro from "./cpns/detail_08-intro.vue";
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDetailInfos } from "@/service";
import useScroll from "@/hooks/useScroll";

const route = useRoute();
const router = useRouter();
const houseId = route.params.id;
// 发送网络请求获取数据
const detailInfos = ref({});
const mainPart = computed(() => detailInfos.value.mainPart);
getDetailInfos(houseId).then((res) => {
  detailInfos.value = res.data;
});
const onClickLeft = () => {
  router.back();
};
//顶部导航栏的展示隐藏
const { scrollTop } = useScroll();
const showTabControl = computed(() => {
  return scrollTop.value >= 300;
});
//点击滚动
const sectionEls = ref({});
const names = computed(() => {
  return Object.keys(sectionEls.value);
});
const getSelectionRef = (value) => {
  if (!value) return;
  const name = value.$el.getAttribute("name");
  sectionEls.value[name] = value.$el;
};

let isClick = false;
let currentDistance = -1;
const tabClick = (index) => {
  const key = Object.keys(sectionEls.value)[index];
  const el = sectionEls.value[key];
  let distance = el.offsetTop;
  if (index !== 0) {
    distance = distance - 44;
  }
  isClick = true;
  currentDistance = distance;
  window.scrollTo({
    top: distance,
    behavior: "smooth",
  });
};
// 页面滚动, 滚动时匹配对应的tabControll的index
const tabControlRef = ref();
watch(scrollTop, (newValue) => {
  if (newValue === currentDistance) {
    isClick = false;
  }
  if (isClick) return;
  // 1.获取所有的区域的offsetTops
  const els = Object.values(sectionEls.value);
  const values = els.map((el) => el.offsetTop);

  // 2.根据newValue去匹配想要索引
  let index = values.length - 1;
  for (let i = 0; i < values.length; i++) {
    if (values[i] > newValue + 44) {
      index = i - 1;
      break;
    }
  }
  // console.log(index)
  tabControlRef.value?.setCurrentIndex(index);
});
</script>

<style lang="less" scoped>
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}

</style>
